/*
  学习目标：props的俩个特点
  步骤：
     1. props可以传递任意数据类型
          number string boolean null undefined object arr
          🔔 function  🔔 JSX
     2. props是只读的 - 类似vue中的单项数据流
*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        {/* number string */}
        <Child name="zs" age={20}></Child>
        {/* boolean null undefined */}
        <Child bl={true} nl={null} und={undefined}></Child>
        {/* object */}
        <Child obj={{ name: 'zs', age: 20 }}></Child>
        {/* arr */}
        <Child arr={[1, 2, 3, 4]}></Child>
        {/* function */}
        <Child func={() => alert('我是传递给子组件的方法')}></Child>
        {/* JSX */}
        <Child jsx={<i>我是传递给子组件的jsx</i>}></Child>
      </div>
    );
  }
}

function Child({ name, age, bl, nl, und, obj, arr, func, jsx }) {
  //   console.log('func -----> ', func);
  return (
    <div>
      我是子组件 - {name} - {age}
      <div>
        <div>
          {bl} - {String(bl)}
        </div>
        <div>
          {nl} - {String(nl)}
        </div>
        <div>
          {und} - {String(und)}
        </div>
      </div>
      <div>{JSON.stringify(obj)}</div>
      <div>{arr}</div>
      {/* 注意不要调用，只需要把函数放到onClick中即可 */}
      <button onClick={func}>点我调用父组件的函数</button>
      <div>{jsx}</div>
      {/* props是单向的，不允许直接修改，跟vue一样 */}
      {/* 强行改也不会有任何效果 */}
      <button onClick={() => (name = '我修改了props')}>点我修改props</button>
    </div>
  );
}
